<template>
  <div class="reports-container">
    <el-card>
      <!-- 搜索和筛选区域 -->
      <div class="search-section">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索话题标题或内容"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="searchForm.status"
              placeholder="审核状态"
              clearable
            >
              <el-option label="全部" value="" />
              <el-option label="待审核" value="pending" />
              <el-option label="已通过" value="approved" />
              <el-option label="已拒绝" value="rejected" />
              <el-option label="已隐藏" value="hidden" />
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="searchForm.category"
              placeholder="话题分类"
              clearable
            >
              <el-option label="全部" value="" />
              <el-option label="技术讨论" value="tech" />
              <el-option label="学习交流" value="study" />
              <el-option label="职业发展" value="career" />
              <el-option label="生活分享" value="life" />
              <el-option label="问答求助" value="qa" />
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="searchForm.priority"
              placeholder="优先级"
              clearable
            >
              <el-option label="全部" value="" />
              <el-option label="紧急" value="urgent" />
              <el-option label="高" value="high" />
              <el-option label="普通" value="normal" />
              <el-option label="低" value="low" />
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 15px;">
          <el-col :span="18">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-section">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.total }}</div>
                <div class="stat-label">总话题数</div>
              </div>
              <el-icon class="stat-icon total"><ChatDotRound /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.pending }}</div>
                <div class="stat-label">待审核</div>
              </div>
              <el-icon class="stat-icon pending"><Clock /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.approved }}</div>
                <div class="stat-label">已通过</div>
              </div>
              <el-icon class="stat-icon approved"><Check /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.rejected }}</div>
                <div class="stat-label">已拒绝</div>
              </div>
              <el-icon class="stat-icon rejected"><Close /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.reported }}</div>
                <div class="stat-label">被举报</div>
              </div>
              <el-icon class="stat-icon reported"><Warning /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ stats.todayNew }}</div>
                <div class="stat-label">今日新增</div>
              </div>
              <el-icon class="stat-icon today"><Plus /></el-icon>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 快速筛选标签 -->
      <div class="quick-filters">
        <span class="filter-label">快速筛选：</span>
        <el-tag
          v-for="filter in quickFilters"
          :key="filter.key"
          :type="activeFilter === filter.key ? 'primary' : ''"
          :effect="activeFilter === filter.key ? 'dark' : 'plain'"
          class="filter-tag"
          @click="handleQuickFilter(filter.key)"
        >
          {{ filter.label }} ({{ filter.count }})
        </el-tag>
      </div>

      <!-- 批量操作 -->
      <div class="batch-actions">
        <el-button
          type="success"
          :disabled="!multipleSelection.length"
          @click="batchApprove"
        >
          批量通过
        </el-button>
        <el-button
          type="danger"
          :disabled="!multipleSelection.length"
          @click="batchReject"
        >
          批量拒绝
        </el-button>
        <el-button
          type="warning"
          :disabled="!multipleSelection.length"
          @click="batchHide"
        >
          批量隐藏
        </el-button>
        <el-button
          type="info"
          :disabled="!multipleSelection.length"
          @click="batchDelete"
        >
          批量删除
        </el-button>
        <span class="selection-info">
          已选择 {{ multipleSelection.length }} 项
        </span>
      </div>

      <!-- 话题列表 -->
      <el-table
        :data="topicList"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        
        <el-table-column label="话题信息" width="400" fixed="left">
          <template #default="{ row }">
            <div class="topic-info">
              <div class="topic-header">
                <h4 class="topic-title" @click="handlePreview(row)">{{ row.title }}</h4>
                <div class="topic-badges">
                  <el-tag
                    v-if="row.isTop"
                    type="danger"
                    size="small"
                    effect="dark"
                  >
                    置顶
                  </el-tag>
                  <el-tag
                    v-if="row.isHot"
                    type="warning"
                    size="small"
                    effect="dark"
                  >
                    热门
                  </el-tag>
                  <el-tag
                    v-if="row.reportCount > 0"
                    type="danger"
                    size="small"
                  >
                    {{ row.reportCount }}举报
                  </el-tag>
                </div>
              </div>
              <div class="topic-content">{{ row.content }}</div>
              <div class="topic-meta">
                <span class="author">作者：{{ row.author.nickname }}</span>
                <span class="category">分类：{{ getCategoryName(row.category) }}</span>
                <span class="time">发布：{{ row.createTime }}</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="优先级" width="100">
          <template #default="{ row }">
            <el-tag
              :type="getPriorityType(row.priority)"
              size="small"
            >
              {{ getPriorityText(row.priority) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="审核状态" width="120">
          <template #default="{ row }">
            <el-tag
              :type="getStatusType(row.status)"
              size="small"
            >
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="viewCount" label="浏览" width="80" sortable="custom" />
        <el-table-column prop="likeCount" label="点赞" width="80" sortable="custom" />
        <el-table-column prop="commentCount" label="评论" width="80" sortable="custom" />

        <el-table-column label="审核信息" width="200">
          <template #default="{ row }">
            <div v-if="row.reviewInfo">
              <div class="review-info">
                <div>审核人：{{ row.reviewInfo.reviewer }}</div>
                <div>审核时间：{{ row.reviewInfo.reviewTime }}</div>
                <div v-if="row.reviewInfo.reason" class="review-reason">
                  {{ row.reviewInfo.reason }}
                </div>
              </div>
            </div>
            <span v-else class="text-muted">暂无审核信息</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button
                type="primary"
                size="small"
                @click="handlePreview(row)"
              >
                查看
              </el-button>
              
              <el-button
                v-if="row.status === 'pending'"
                type="success"
                size="small"
                @click="handleApprove(row)"
              >
                通过
              </el-button>
              
              <el-button
                v-if="row.status === 'pending'"
                type="danger"
                size="small"
                @click="handleReject(row)"
              >
                拒绝
              </el-button>
              
              <el-dropdown v-if="row.status !== 'pending'">
                <el-button size="small">
                  更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleEdit(row)">编辑</el-dropdown-item>
                    <el-dropdown-item @click="handleToggleTop(row)">
                      {{ row.isTop ? '取消置顶' : '设为置顶' }}
                    </el-dropdown-item>
                    <el-dropdown-item @click="handleToggleHide(row)">
                      {{ row.status === 'hidden' ? '显示' : '隐藏' }}
                    </el-dropdown-item>
                    <el-dropdown-item v-if="row.status !== 'pending'" @click="handleResetStatus(row)">
                      重置状态
                    </el-dropdown-item>
                    <el-dropdown-item divided @click="handleDelete(row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 话题预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="话题详情"
      width="900px"
      @close="handlePreviewClose"
    >
      <div class="topic-preview" v-if="currentTopic">
        <div class="topic-detail-header">
          <h2>{{ currentTopic.title }}</h2>
          <div class="topic-badges">
            <el-tag v-if="currentTopic.isTop" type="danger" effect="dark">置顶</el-tag>
            <el-tag v-if="currentTopic.isHot" type="warning" effect="dark">热门</el-tag>
            <el-tag :type="getStatusType(currentTopic.status)">
              {{ getStatusText(currentTopic.status) }}
            </el-tag>
          </div>
        </div>
        
        <div class="topic-author-info">
          <el-avatar :src="currentTopic.author.avatar" size="small" />
          <span class="author-name">{{ currentTopic.author.nickname }}</span>
          <span class="author-level">Lv.{{ currentTopic.author.level }}</span>
          <span class="publish-time">{{ currentTopic.createTime }}</span>
        </div>
        
        <div class="topic-content-detail" v-html="currentTopic.contentHtml"></div>
        
        <div class="topic-images" v-if="currentTopic.images && currentTopic.images.length">
          <el-image
            v-for="(image, index) in currentTopic.images"
            :key="index"
            :src="image"
            fit="cover"
            class="topic-image"
            :preview-src-list="currentTopic.images"
            :initial-index="index"
          />
        </div>
        
        <div class="topic-stats">
          <div class="stat-item">
            <el-icon><View /></el-icon>
            <span>{{ currentTopic.viewCount }} 浏览</span>
          </div>
          <div class="stat-item">
            <el-icon><Star /></el-icon>
            <span>{{ currentTopic.likeCount }} 点赞</span>
          </div>
          <div class="stat-item">
            <el-icon><ChatDotRound /></el-icon>
            <span>{{ currentTopic.commentCount }} 评论</span>
          </div>
          <div class="stat-item" v-if="currentTopic.reportCount > 0">
            <el-icon><Warning /></el-icon>
            <span>{{ currentTopic.reportCount }} 举报</span>
          </div>
        </div>
        
        <div class="topic-tags" v-if="currentTopic.tags && currentTopic.tags.length">
          <span class="tags-label">标签：</span>
          <el-tag
            v-for="tag in currentTopic.tags"
            :key="tag"
            size="small"
            class="tag-item"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="previewVisible = false">关闭</el-button>
        <el-button
          v-if="currentTopic && currentTopic.status === 'pending'"
          type="success"
          @click="handleApprove(currentTopic)"
        >
          通过审核
        </el-button>
        <el-button
          v-if="currentTopic && currentTopic.status === 'pending'"
          type="danger"
          @click="handleReject(currentTopic)"
        >
          拒绝审核
        </el-button>
      </template>
    </el-dialog>

    <!-- 审核拒绝对话框 -->
    <el-dialog
      v-model="rejectVisible"
      title="审核拒绝"
      width="500px"
    >
      <el-form :model="rejectForm" ref="rejectFormRef" :rules="rejectRules">
        <el-form-item label="拒绝理由" prop="reason">
          <el-select
            v-model="rejectForm.reason"
            placeholder="请选择拒绝理由"
            style="width: 100%"
            allow-create
            filterable
          >
            <el-option
              v-for="reason in rejectReasons"
              :key="reason"
              :label="reason"
              :value="reason"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细说明">
          <el-input
            v-model="rejectForm.description"
            type="textarea"
            :rows="3"
            placeholder="可选：补充详细说明"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="rejectVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmReject">确认拒绝</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  keyword: '',
  status: '',
  category: '',
  priority: '',
  dateRange: []
})

// 统计数据
const stats = reactive({
  total: 2456,
  pending: 89,
  approved: 2134,
  rejected: 233,
  reported: 23,
  todayNew: 45
})

// 快速筛选
const activeFilter = ref('')
const quickFilters = ref([
  { key: 'all', label: '全部', count: 2456 },
  { key: 'pending', label: '待审核', count: 89 },
  { key: 'urgent', label: '紧急处理', count: 12 },
  { key: 'reported', label: '被举报', count: 23 },
  { key: 'hot', label: '热门话题', count: 156 },
  { key: 'today', label: '今日发布', count: 45 }
])

// 表格数据
const loading = ref(false)
const topicList = ref([
  {
    id: 1,
    title: 'Vue 3.0 的响应式原理详解，从源码角度分析Proxy实现',
    content: '最近在学习Vue 3.0的响应式系统，发现与Vue 2.x相比有很大的改进。本文将从源码角度详细分析Proxy的实现原理...',
    contentHtml: '<p>最近在学习Vue 3.0的响应式系统，发现与Vue 2.x相比有很大的改进。本文将从源码角度详细分析Proxy的实现原理...</p>',
    author: {
      id: 1,
      nickname: '前端小王',
      avatar: 'https://via.placeholder.com/40x40?text=王',
      level: 5
    },
    category: 'tech',
    priority: 'normal',
    status: 'pending',
    isTop: false,
    isHot: true,
    viewCount: 1234,
    likeCount: 89,
    commentCount: 23,
    reportCount: 0,
    createTime: '2024-03-15 14:30:00',
    tags: ['Vue3', '响应式', 'Proxy', '源码'],
    images: [],
    reviewInfo: null
  },
  {
    id: 2,
    title: '分享一个React性能优化的实战案例',
    content: '在最近的项目中遇到了严重的性能问题，通过一系列优化手段成功提升了50%的渲染性能...',
    contentHtml: '<p>在最近的项目中遇到了严重的性能问题，通过一系列优化手段成功提升了50%的渲染性能...</p>',
    author: {
      id: 2,
      nickname: 'React专家',
      avatar: 'https://via.placeholder.com/40x40?text=专',
      level: 8
    },
    category: 'tech',
    priority: 'high',
    status: 'approved',
    isTop: true,
    isHot: false,
    viewCount: 2567,
    likeCount: 156,
    commentCount: 45,
    reportCount: 0,
    createTime: '2024-03-14 09:15:00',
    tags: ['React', '性能优化', '实战'],
    images: ['https://via.placeholder.com/300x200?text=优化前后对比'],
    reviewInfo: {
      reviewer: '管理员A',
      reviewTime: '2024-03-14 10:30:00',
      reason: null
    }
  },
  {
    id: 3,
    title: '这个学习方法真的垃圾！！！',
    content: '完全就是在浪费时间，根本学不到什么东西，建议大家不要尝试...',
    contentHtml: '<p>完全就是在浪费时间，根本学不到什么东西，建议大家不要尝试...</p>',
    author: {
      id: 3,
      nickname: '匿名用户',
      avatar: 'https://via.placeholder.com/40x40?text=匿',
      level: 1
    },
    category: 'study',
    priority: 'urgent',
    status: 'rejected',
    isTop: false,
    isHot: false,
    viewCount: 234,
    likeCount: 2,
    commentCount: 8,
    reportCount: 5,
    createTime: '2024-03-13 16:45:00',
    tags: ['学习方法'],
    images: [],
    reviewInfo: {
      reviewer: '管理员B',
      reviewTime: '2024-03-13 18:00:00',
      reason: '内容消极，用词不当，不符合社区规范'
    }
  }
])

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 2456
})

// 多选
const multipleSelection = ref([])

// 排序
const sortConfig = reactive({
  prop: '',
  order: ''
})

// 预览相关
const previewVisible = ref(false)
const currentTopic = ref(null)

// 拒绝审核相关
const rejectVisible = ref(false)
const rejectForm = reactive({
  reason: '',
  description: ''
})
const rejectFormRef = ref()
const rejectRules = {
  reason: [
    { required: true, message: '请选择或输入拒绝理由', trigger: 'change' }
  ]
}
const currentRejectTopic = ref(null)
const rejectReasons = [
  '内容违规或不当',
  '垃圾信息或广告',
  '重复发布',
  '标题或内容不符合规范',
  '涉及敏感话题',
  '恶意灌水',
  '与社区主题不符',
  '其他'
]

// 方法
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('搜索完成')
  }, 1000)
}

const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = key === 'dateRange' ? [] : ''
  })
  activeFilter.value = ''
  handleSearch()
}

const handleQuickFilter = (filterKey) => {
  activeFilter.value = activeFilter.value === filterKey ? '' : filterKey
  // 根据快速筛选更新搜索条件
  switch (filterKey) {
    case 'pending':
      searchForm.status = 'pending'
      break
    case 'urgent':
      searchForm.priority = 'urgent'
      break
    case 'reported':
      // 筛选被举报的话题
      break
    default:
      break
  }
  handleSearch()
}

const handleSelectionChange = (selection) => {
  multipleSelection.value = selection
}

const handleSortChange = ({ prop, order }) => {
  sortConfig.prop = prop
  sortConfig.order = order
  handleSearch()
}

const batchApprove = () => {
  ElMessageBox.confirm(
    `确定要批量通过选中的 ${multipleSelection.value.length} 个话题吗？`,
    '批量通过',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('批量通过成功')
  })
}

const batchReject = () => {
  ElMessageBox.prompt('请输入拒绝理由', '批量拒绝', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'textarea',
    inputValidator: (value) => {
      if (!value) return '请输入拒绝理由'
      return true
    }
  }).then(({ value }) => {
    ElMessage.success('批量拒绝成功')
  })
}

const batchHide = () => {
  ElMessageBox.confirm(
    `确定要批量隐藏选中的 ${multipleSelection.value.length} 个话题吗？`,
    '批量隐藏',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('批量隐藏成功')
  })
}

const batchDelete = () => {
  ElMessageBox.confirm(
    `确定要删除选中的 ${multipleSelection.value.length} 个话题吗？此操作不可恢复！`,
    '批量删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }
  ).then(() => {
    ElMessage.success('批量删除成功')
  })
}

const handlePreview = (row) => {
  currentTopic.value = row
  previewVisible.value = true
}

const handlePreviewClose = () => {
  currentTopic.value = null
}

const handleApprove = (row) => {
  ElMessageBox.confirm(
    `确定要通过话题「${row.title}」的审核吗？`,
    '审核通过',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success'
    }
  ).then(() => {
    row.status = 'approved'
    row.reviewInfo = {
      reviewer: '当前管理员',
      reviewTime: new Date().toLocaleString(),
      reason: null
    }
    previewVisible.value = false
    ElMessage.success('审核通过')
  })
}

const handleReject = (row) => {
  currentRejectTopic.value = row
  rejectVisible.value = true
}

const confirmReject = () => {
  rejectFormRef.value.validate((valid) => {
    if (valid) {
      const reason = rejectForm.description 
        ? `${rejectForm.reason}：${rejectForm.description}`
        : rejectForm.reason
      
      currentRejectTopic.value.status = 'rejected'
      currentRejectTopic.value.reviewInfo = {
        reviewer: '当前管理员',
        reviewTime: new Date().toLocaleString(),
        reason: reason
      }
      rejectVisible.value = false
      previewVisible.value = false
      rejectForm.reason = ''
      rejectForm.description = ''
      currentRejectTopic.value = null
      ElMessage.success('审核拒绝成功')
    }
  })
}

const handleEdit = (row) => {
  ElMessage.info('跳转到编辑页面')
}

const handleToggleTop = (row) => {
  row.isTop = !row.isTop
  ElMessage.success(row.isTop ? '已设为置顶' : '已取消置顶')
}

const handleToggleHide = (row) => {
  if (row.status === 'hidden') {
    row.status = 'approved'
    ElMessage.success('话题已显示')
  } else {
    row.status = 'hidden'
    ElMessage.success('话题已隐藏')
  }
}

const handleResetStatus = (row) => {
  ElMessageBox.confirm(
    `确定要重置话题「${row.title}」的状态为待审核吗？`,
    '重置状态',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    row.status = 'pending'
    row.reviewInfo = null
    ElMessage.success('状态已重置为待审核')
  })
}

const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除话题「${row.title}」吗？此操作不可恢复！`,
    '删除话题',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }
  ).then(() => {
    const index = topicList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      topicList.value.splice(index, 1)
    }
    ElMessage.success('删除成功')
  })
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  handleSearch()
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
  handleSearch()
}

// 工具方法
const getCategoryName = (category) => {
  const categoryMap = {
    tech: '技术讨论',
    study: '学习交流',
    career: '职业发展',
    life: '生活分享',
    qa: '问答求助'
  }
  return categoryMap[category] || category
}

const getPriorityType = (priority) => {
  const typeMap = {
    urgent: 'danger',
    high: 'warning',
    normal: '',
    low: 'info'
  }
  return typeMap[priority] || ''
}

const getPriorityText = (priority) => {
  const textMap = {
    urgent: '紧急',
    high: '高',
    normal: '普通',
    low: '低'
  }
  return textMap[priority] || priority
}

const getStatusType = (status) => {
  const typeMap = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger',
    hidden: 'info'
  }
  return typeMap[status] || ''
}

const getStatusText = (status) => {
  const textMap = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝',
    hidden: '已隐藏'
  }
  return textMap[status] || status
}

onMounted(() => {
  handleSearch()
})
</script>

<style scoped>
.reports-container {
  padding: 20px;
}
/* 搜索区域 */
.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 20px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  padding: 10px 0;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 13px;
  color: #909399;
}

.stat-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  opacity: 0.3;
}

.stat-icon.total { color: #409EFF; }
.stat-icon.pending { color: #E6A23C; }
.stat-icon.approved { color: #67C23A; }
.stat-icon.rejected { color: #F56C6C; }
.stat-icon.reported { color: #F56C6C; }
.stat-icon.today { color: #909399; }

/* 快速筛选 */
.quick-filters {
  margin-bottom: 20px;
  padding: 15px;
  background: #fafbfc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-label {
  font-weight: 500;
  color: #606266;
  margin-right: 5px;
}

.filter-tag {
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-tag:hover {
  transform: translateY(-1px);
}

/* 批量操作 */
.batch-actions {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.selection-info {
  color: #606266;
  font-size: 14px;
  margin-left: auto;
}

/* 话题信息 */
.topic-info {
  padding: 8px 0;
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.topic-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  cursor: pointer;
  line-height: 1.4;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-title:hover {
  color: #409EFF;
}

.topic-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.topic-content {
  font-size: 13px;
  color: #606266;
  line-height: 1.4;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.topic-meta {
  font-size: 12px;
  color: #909399;
  display: flex;
  gap: 12px;
}

/* 审核信息 */
.review-info {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
}

.review-reason {
  color: #F56C6C;
  margin-top: 4px;
  font-weight: 500;
}

.text-muted {
  color: #C0C4CC;
  font-size: 12px;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 分页 */
.pagination-section {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 预览对话框 */
.topic-preview {
  max-height: 600px;
  overflow-y: auto;
}

.topic-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.topic-detail-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
  line-height: 1.4;
  max-width: 70%;
}

.topic-author-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
}

.author-name {
  font-weight: 500;
  color: #303133;
}

.author-level {
  background: #409EFF;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
}

.publish-time {
  color: #909399;
  font-size: 13px;
  margin-left: auto;
}

.topic-content-detail {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #303133;
}

.topic-images {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.topic-image {
  width: 120px;
  height: 80px;
  border-radius: 6px;
  cursor: pointer;
}

.topic-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background: #fafbfc;
  border-radius: 8px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606266;
  font-size: 14px;
}

.topic-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tags-label {
  color: #606266;
  font-size: 14px;
}

.tag-item {
  margin: 0;
}

/* 响应式 */
@media (max-width: 1200px) {
  .stats-section .el-col {
    margin-bottom: 10px;
  }
  
  .topic-title {
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  .search-section .el-row {
    flex-direction: column;
  }
  
  .search-section .el-col {
    margin-bottom: 10px;
  }
  
  .quick-filters {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .batch-actions {
    flex-wrap: wrap;
  }
  
  .topic-header {
    flex-direction: column;
    gap: 8px;
  }
  
  .topic-title {
    max-width: 100%;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
  
  .topic-detail-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .topic-detail-header h2 {
    max-width: 100%;
  }
  
  .topic-stats {
    flex-direction: column;
    gap: 10px;
  }
  
  .action-buttons {
    justify-content: flex-start;
  }
}
</style>